<template>
	<view>
		<view class="tui-alert-mask" :class="[showAlertFlag?'tui-alert-mask-show':'']" @tap="handleClickCancel"></view>
		<view class="tui-alert-class tui-alert-box" :style="{width:alertWidth + 'rpx'}" :class="[showAlertFlag?'tui-alert-show':'']">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"commonAlert",
		props:{
			showAlertFlag:{
				type : Boolean,
				default:false
			},
			alertWidth : {
				type : Number,
				default:600
			},
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			handleClickCancel() {
				if (!this.maskClosable) return;
				this.$emit('closeAlertComponent');
			}
		}
	}
</script>

<style>
	@import url("/static/css/common/alert.css");
</style>
